<style type="text/css">
	.layui-table-cell{
		height: auto; /* */
	}
</style>
<fieldset class="layui-elem-field layui-field-title">
  <legend>分类列表</legend>
</fieldset>
<table id="list" lay-filter="list" ></table>
<script type="text/html" id = "bar">
    {{# if(d.status == 1){	}}
	<a class="layui-btn layui-btn-sm" lay-event="recover">恢复</a>
	{{# } }}
	{{# if(d.status == 0){	 }}
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
	{{# } }}
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
</script>
<script type="text/html" id="picture">
	{{#
		if(d.picture != null){
	}}
		<img src="http://127.0.0.1:9000/upload/{{d.picture}}" />
	{{#
		}	
	}}
</script>
<script type="text/html" id="edit">
	<form class="layui-form">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">分类名称</label>
			<div class="layui-input-inline">
				<input type="text"  name="name" class="layui-input" placeholder="请输入分类名"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">父分类</label>
			<div class="layui-input-inline">
				<select name="parent"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<input type="hidden" name="picture"  "/>
			<label class="layui-form-label">分类图片</label>
			<div class="layui-input-inline">
				<!-- 使用layui的上传图片的插件 -->
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="demo1" style="width: 92px;height: 92px;">
				    <p id="demoText"></p>
				  </div>
				  <div style="width: 95px;">
				    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
				      <div class="layui-progress-bar" lay-percent=""></div>
				    </div>
				  </div>
				</div> 
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn layui-btn-danger" 
					lay-submit lay-filter="edit">修改分类</button>
			</div>	
	</form>
</script>


<script type="text/javascript">
	layui.use(['table','upload','form','element'],function(){
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		var $ = layui.$;
		
		table.render({
			elem:'#list',
			height:600,
			url:'http://localhost:9000/api/goodsSorts',
			where:{parent:0},
			method:'get',
			page:true,
			cols:[[
				{field: 'id',title:'ID',width: 100},
				{field:'name',title:'分类名',width:250},
				{field:'picture',title:'图片',templet:'#picture',width: 400},
				{field:'parent',title:'父分类',templet :function(d){
					return d.parentSort==null ? '': d.parentSort.name;
				}, width:300},
				{field:'status',title:'状态',templet:function(d){
					return ['正常','删除'][d.status];
				},width : 200},
				{title:'操作',toolbar:'#bar',width: 150,fixed:'right'}
			]],
			parseData: function(res){
				return{
					"code":0,
					"msg":res.data.msg,
					"count":res.data.total,
					"data":res.data.list
				};
			},
			done: function(res, curr, count){
							// 固定列高度适应
							$(".layui-table-main  tr").each(function (index ,val) {
								$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
							});
						}
		});
		
		table.on('tool(list)',function(obj){
			if(obj.event == 'delete'){
				layer.confirm('确定删除吗？',function(index){
					layer.close(index);
					$.ajax({
						url:'http://127.0.0.1:9000/api/goodsSorts/',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'',
						success:function(data){
							if(data.status == 200){
								layer.msg("删除成功");
							}else if (data.status == 404){
								layui.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){
							
						}
					});
				});
				
				
			}else if (obj.event == 'recover'){
				
				
			}else if(obj.event == 'edit'){
				var index =layer.open({
					type:1,
					content:$('#edit').html()
				});
				$("input[name='id']").val(obj.data.id);
				$("input[name='name']").val(obj.data.name);                          
				$("img#demo1").attr('src','http://127.0.0.1:9000/upload/'+obj.data.picture);
				
				$.ajax({
					url:'http://127.0.0.1:9000/api/goodsSorts',
					type:'get',
					dataType:'json',
					success:function(data){
						var html = "<option value=''>请选选择分类</option>"
						$.each(data.data.list,function(index,item){
							if(item.id == obj.data.parent){
								html+='<option value="'+item.id+'" selected="selected">'+item.name+'</option>';
							}else{
								html+='<option value="'+item.id+'">'+item.name+'</option>';
							}							
						});
						$("select[name='parent']").html(html);
						form.render();
					},
					error:function(){
						
					}
				});
				form.on('submit(edit)',function(data){
					$.ajax({
						url:'http://127.0.0.1:9000/api/goodsSorts',
						type:'put',
						data:JSON.stringify(data.field),
						contentType:'application/json; charset=utf-8',
						dataType:'json',
						success:function(data){
							if(data.status == 201){
								layer.msg("修改成功！");
								layer.close(index);
								table.reload('list');
							}else{
								layer.msg(data.msg);
							}
						},
						error:function(){
							
						}
					});
					
					return false;
				});
				var uploadInst = upload.render({
				   elem: '#test1'
				   ,url: 'http://127.0.0.1:9000/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				   ,before: function(obj){
				     //预读本地文件示例，不支持ie8
				     obj.preview(function(index, file, result){
				       $('#demo1').attr('src', result); //图片链接（base64）
				     });
				     
				     element.progress('demo', '0%'); //进度条复位
				     layer.msg('上传中', {icon: 16, time: 0});
				   }
				   ,done: function(res){
				     //如果上传失败
				     if(res.code > 0){
				       return layer.msg('上传失败');
				     }
				     //上传成功的一些操作
							  $("input[name='picture']").val(res.data);
				     //……
				     $('#demoText').html(''); //置空上传失败的状态
				   }
				   ,error: function(){
				     //演示失败状态，并实现重传
				     var demoText = $('#demoText');
				     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				     demoText.find('.demo-reload').on('click', function(){
				       uploadInst.upload();
				     });
				   }
				   //进度条
				   ,progress: function(n, elem, e){
				     element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				     if(n == 100){
				       layer.msg('上传完毕', {icon: 1});
				     }
				   }
				 });
				
			}			
		});
		
		function gotoUrl(url){
			if(url == undefined){
				alert("没有链接");
				return;
			}
			// 使用Ajax请求url
			$.ajax({
				url: url,
				type: 'get',
				data: {},
				dataType: 'html',
				success:function(data){
					$(".layui-body>div").html(data);
				},
				error:function(){
					
				}
			});
		}	
	});
</script>

